<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>图片节点</title>
  </head>
  
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      const Util = G6.Util;
      G6.registerNode('hsf', {
        draw(cfg, group) {
          group.addShape('circle', {
            attrs: {
              x: 36,
              y: 40,
              r: 55,
              stroke: '#71cd00',
              lineWidth: 5,
            }
          });
          group.addShape('image', {
            attrs: {
              x: 0 - 15,
              y: 0 - 22,
              width: 100,
              height: 100,
              img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/APP.png'
            }
          });
          group.addShape('text', {
            attrs: {
              x: 15,
              y: 85,
              text: 'HSF',
              fontSize: 15,
              stroke: 'black'
            }
          });
          group.addShape('text', {
            attrs: {
              x: 35,
              y: 100,
              text: cfg.id,
              fontSize: 13,
              stroke: 'black',
              textAlign: 'center',
              textBaseline: 'top',
            }
          });
          return group;
        }
      });
      G6.registerNode('tair', {
        draw(cfg, group) {
          group.addShape('image', {
            attrs: {
              x: 0,
              y: 0,
              img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png'
            }
          });
          group.addShape('text', {
            attrs: {
              x: 55,
              y: 120,
              text: model.pid,
              fontSize: 13,
              stroke: 'black',
              textAlign: 'center',
              textBaseline: 'top',
            }
          });
          return group
        }
      });
      G6.registerNode('tddl', {
        draw(cfg, group) {
          group.addShape('circle', {
            attrs: {
              x: 36,
              y: 40,
              r: 55,
              fill: '#73c4ff',
              stroke: '#73c4ff',
              lineWidth: 5,
            }
          });
          group.addShape('text', {
            attrs: {
              x: 30,
              y: 35,
              textAlign: 'center',
              textBaseline: 'top',
              text: model.pid,
              fontSize: 13,
              stroke: 'black'
            }
          });
          return group
        }
      });
      const data = {
        nodes: [{
          id: 'node1',
          x: 100,
          y: 200,
          shape: 'hsf'
        },
        {
          id: 'node2',
          x: 300,
          y: 200,
          size: 50,
          label: '萧庆',
          labelCfg: {
            position: 'bottom'
          },
          shape: 'image',
          img: 'https://img2.bosszhipin.com/boss/avatar/avatar_13.png'
        },
        {
          id: 'node3',
          x: 400,
          y: 100,
          size: 30,
          shape: 'image',
          label: '语雀',
          labelCfg: {
            position: 'bottom'
          },
          img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg'
        },
        {
          id: 'node4',
          x: 400,
          y: 400,
          size: 50,
          shape: 'image',
          img: '//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png'
        }],
        edges: [{
          id: 'edge1',
          target: 'node2',
          source: 'node1',
          style: {
            endArrow: true
          },
          label: '你好,我好',
          labelCfg: {
            style: {
              stroke: 'white',
              lineWidth: 5
            } // 加白边框
          }
        },
        {
          source: 'node2',
          target: 'node3',
          style: {
            endArrow: true
          },
          shape: 'quadratic',
          label: '过去的线',
          labelCfg: {
            refY: -10,
            refX: 0,
            autoRotate: true,
            style: {
              fill: 'red'
            }
          }
        },
        {
          source: 'node3',
          target: 'node2',
          style: {
            endArrow: true,
            stroke: 'red'
          },
          size: 2,
          shape: 'quadratic',
          label: '回来的线',
          labelCfg: {
            refY: -10,
            refX: 0,
            autoRotate: true,
            style: {
              fill: 'red'
            }
          }
        },
        {
          source: 'node3',
          target: 'node4',
          style: {
            endArrow: true,
            stroke: 'blue',
            lineDash: [2, 2]
          },
          shape: 'my-edge',
          label: '随便连连\n换行',
          curveLevel: 4,
          labelCfg: {
            refY: -20,
            refX: 0,
            autoRotate: true,
            style: {
              fill: 'red'
            }
          }
        }]
      };
      // 为了定制曲线的曲度，所以需要复写默认的边，额外增加 level 字段，进行设置曲度
      G6.registerEdge('my-edge', {
        // 复写控制点的逻辑
        getControlPoints(cfg) {
          const controlPoints = []; // 指定controlPoints
          const level = cfg.curveLevel || 1; // 从 -10， 10
          const offset = level * -20; // 根据不同的level 计算不同的偏移
          const {
            startPoint,
            endPoint
          } = cfg;
          const innerPoint = Util.getControlPoint(startPoint, endPoint, 0.5, offset);
          controlPoints.push(innerPoint);
          return controlPoints;
        },
      },
      'quadratic');

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 600,
        modes: {
          default: ['drag-node', 'click-select']
        }
      });
      graph.on('node:click', e => {
        console.log(e)
      });
      graph.data(data);

      graph.render();

      graph.on('node:click', ev => {
        console.log(ev);
      });
    </script>
  </body>

</html>